<!--拍照上传-->
<template>
  <div id="CameraUploadPhoto">
    <el-row id="IDPhoto">
      <el-tooltip class="item" effect="dark" content="请拍摄照片" placement="bottom">
        <img :src="cameraImageSrc" class="card-img" style="border-radius: 8px;" @click="handleOpenDialog()">
      </el-tooltip>
      <div class="color-primary tc">
        <slot name="title" />
      </div>
      <div class="color-danger" style="font-size:12px">
        <slot />
      </div>
    </el-row>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :title="'请拍摄照片'"
      :modal-append-to-body="false"
      width="500px"
      custom-class="CameraUploadPhotoDialog">
      <div v-loading="videoLoading" class="read-sucess-tip tc" :element-loading-text="videoLoadingText">
        <video id="videoCamera" autoplay :width="width" :height="height" style="border-radius: 8px;" />
        <canvas id="canvasCamera" style="display:none;" :width="width" :height="height" />
        <img v-if="showSuccessTip" class="success-tip" src="@/assets/images/cameraSuccess.png">
      </div>
      <div class="tip-div">请将相关资料贴近扫描设备</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;">取 消</el-button>
        <el-button :disabled="showSuccessTip" type="primary" @click="handlerPhoto">拍 照</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    width: {
      type: Number,
      required: false,
      default: 379
    },
    height: {
      type: Number,
      required: false,
      default: 238
    }
  },
  data() {
    return {
      cameraImageSrc: require('@/assets/images/cameraPhonto.png'),
      videoImage: require('@/assets/images/cameraPhonto.png'),
      dialogVisible: false,
      showSuccessTip: false, // 是否展示成功图标
      videoCamera: null,
      thisCancas: null,
      thisContext: null,
      videoLoadingText: '设备初始化中...',
      videoLoading: false

    }
  },
  mounted() {
  },
  methods: {
    hasGetUserMedia() {
      return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia)
    },
    getCompetence() {
      this.videoLoading = true
      this.videoLoadingText = '设备初始化中...'
      this.thisCancas = document.getElementById('canvasCamera')
      this.thisContext = this.thisCancas.getContext('2d')
      this.videoCamera = document.getElementById('videoCamera')
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {}
      }
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function(constraints) {
          var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
          if (!getUserMedia) {
            this.msgWarning()
            this.$notify({
              title: '警告',
              message: '当前浏览器版本太低，不支持媒体，建议升级至最新浏览器或使用谷歌浏览器',
              type: 'warning',
              duration: 0
            })
            this.videoLoading = false
            return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
          }
          return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject)
          })
        }
      }
      var constraints = { audio: false, video: { width: this.width, height: this.height, transform: 'scaleX(-1)' }}
      navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        this.videoLoading = false
        if ('srcObject' in this.videoCamera) {
          this.videoCamera.srcObject = stream
        } else {
          this.videoCamera.src = window.URL.createObjectURL(stream)
        }
      }).catch(err => {
        console.log(err)
        this.$notify({
          title: '警告',
          message: '设备初始化失败：' + err,
          type: 'warning',
          duration: 0
        })
        this.videoLoading = false
      })
    },
    stopNavigator() {
      this.videoCamera.srcObject.getTracks()[0].stop()
    },
    handleClose(done) {
      this.$confirm('确认关闭？').then(_ => {
        done()
      }).catch(_ => {})
    },
    handleOpenDialog() {
      this.dialogVisible = true
      this.videoLoading = false
      this.showSuccessTip = false
      this.$nextTick(() => {
        this.getCompetence()
      })
    },
    handlerPhoto() {
      this.videoLoading = true
      this.videoLoadingText = '拍摄中...'
      this.thisContext.drawImage(this.videoCamera, 0, 0, this.width, this.height)
      this.cameraImageSrc = this.thisCancas.toDataURL('image/png')
      this.showSuccessTip = true
      this.stopNavigator()
      this.dialogVisible = false
      this.$emit('cameraResult', this.cameraImageSrc)
      this.videoLoading = false
      // 此处接入接口将图片上传后台
    }
  }
}
</script>
<style lang="scss" >
#CameraUploadPhoto{
    #IDPhoto{
      width: 182px;
        .card-img{
            width: inherit;
            height: 114px;
            cursor: pointer;
        }
    }
    .el-dialog {
       margin-top: 18vh!important;
       border-radius: 10px;
      .tip-div {
        padding-top: 20px;
        margin: 0 auto;
        text-align: center;
        font-size: 18px;
        line-height: 26px;
        color: #303133;
      }
      .read-sucess-tip {
        position: relative;
      }
      .success-tip {
        position: absolute;
        left: 200px;
        top: 70px;
      }
    }
}
</style>
